<!--深度-->
<template>
  <div class="bg">

    <!--类别-->
    <div class="menu">
      <div class="menu-size" @click="allClick">
        <div class="colum">
          <text :class="['font32', menu ? 'main-t1' : 'text2']">{{T('当前委托')}}</text>
          <div :class="['menu-line', menu ? 'main1' : '']"></div>
        </div>
      </div>
      
      <div class="menu-size" @click="historyClick">
        <div class="colum">
          <div class="row acenter">
            <text :class="['font32', !menu ? 'main-t1' : 'text2']">{{T('历史委托')}}</text>
          <LImage class="menu-tipe" :src="Config.img('btn_view_explain.png')" @click="tipeClick" />
          </div>
          <div :class="['menu-line', !menu ? 'main1' : '']"></div>
        </div>
      </div>
    </div>

     <!--赛选-->
    <div class="screen" v-if="pair">
      
      <div class="screen-size" @click="parClick">
        <text class="font24 text2">{{pair.counterCoin+'/'+pair.baseCoin}}</text>
        <LImage class="img-arrow-down" :src="Config.img('trading_triangle_white.png')" @click="apiTipe"></LImage>
      </div>

      <div class="screen-size" @click="functionClick">
        <text class="font24 text2">{{T(type)}}</text>
        <LImage class="img-arrow-down" :src="Config.img('trading_triangle_white.png')" @click="apiTipe"></LImage>
      </div>

      <div class="screen-size" @click="actionClick">
        <text class="font24 text2">{{'   '+T(actionType)}}</text>
        <LImage class="img-arrow-down" :src="Config.img('trading_triangle_white.png')" @click="apiTipe"></LImage>
      </div>
    </div>

     <!--列表-->
    <scroller v-if="datas.length" class="scroller bg1">
      <div class="wrapper">

        <template v-for="(item, index) in datas">
          
          <VTOrderCell v-if="menu && item.baseCoin" :key="index"
          :item="item" :isContract="isContract" @cancel="cancelClick(item, index)" />

          <VTOrderCellOk v-else-if ="!menu && item.baseCoin" :key="index"
          :item="item" :isContract="isContract" />
          
          <div v-else class="order-genduo" :key="index">
            <text class="font22 text2">{{T('没有更多数据')}}</text>
          </div>
        </template>
      </div>
    </scroller>

    <!--无委托-->
    <div v-else class="order-kong bg1">
      <LImage class="img-kong" :src="Config.img('list_empty.png')"></LImage>
      <text class="font28 text2">{{T('暂无委托~')}}</text>
    </div>
  </div>
</template>


<script>
import jconfig from "@/_js/config"
import jmodal from "@/_js/modal"
import jmath from "@/_js/math"
import jtime from "@/_js/time"
import jnavigator from "@/_js/navigator"
import jhttps from "@/_js/https"
import jbroadcast from "@/_js/broadcast";

import jtrading from "./view/trading"

const weexFunction = weex.requireModule("WeexFunction")
const WeexTrading = weex.requireModule("WeexTrading")

import I18N from "@/_i18n/i18n";
var T = I18N.t;

import VTOrderCell from './view/VTOrderCell.vue'
import VTOrderCellOk from './view/VTOrderCellOk.vue'
export default {
  components: {
    VTOrderCell,
    VTOrderCellOk
  },

  watch: {
    api(val, oldVal) {
      if (val.apiId != oldVal.apiId) {
        jtrading.delectApiRsaStr(this.isContract);
        this.refresh(false);
        val.apiId ? this.addTime() : this.delectTime();
      }
    }
  },

  data() {
    return {
      T:T,
      Config:jconfig,
      
      menu:true, //true当前委托 false历史委托

      types:['全部委托', '限价委托', '市价委托'], //功能列表
      typex:{'全部委托':'', '限价委托':'limit', '市价委托':'market'}, //功能标识
      type:'全部委托', //当前功能

      actionTypes:['全部', '买入', '卖出'], //操作列表
      actionType:'全部', //操作

      api:undefined,
      pair:undefined,
      isContract:true,

      timeHandler:undefined,
      length:-1, //数据长度
      array: [],
      datas: [],
    };
  },

  beforeDestroy() {
    if(this.timeHandler){
      clearTimeout(this.timeHandler);
    }
  },

  mounted() {

    this.api = jnavigator.getParam('api');
    this.pair = jnavigator.getParam('pair');
    this.isContract = jnavigator.getParam('isContract');

    this.actionTypes = this.isContract 
    ? ['全部', '开多', '开空', '平多', '平空'] 
    : ['全部', '买入', '卖出'];
    this.api.apiId && this.addTime();
    this.refresh();
  },
  
  computed: {
  },

  methods: {

    /************************************************* 通信*/
    //完全显示
    viewappear() {
    },

    //完全隐藏
    viewdisappear() {
      this.delectTime();
    },

    //刷新列表
    refresh(load=true) {
      if (!this.api.apiId) {
        this.length = -1;
        this.array = [];
        this.datas = [];
        return;
      };

      load && jmodal.showLoad();
      jtrading.gtApiRsaStr(this.api, this.isContract, load, (rsa)=>{
        this.menu 
        ? this.httpsQueryOrderList(load, rsa) 
        : this.httpsQueryOrderListOk(load, rsa);
      });
    },

    /************************************************* 其他*/
    //订单改变
    change(datas) {
      
      if (this.length != -1 && this.length != datas.length) {
        WeexTrading.apiChange(this.api.apiId, '', '0');
      }
      this.length = datas.length;
    },

    //搜索数据
    searchData(datas) {
      
      var array = [];
      datas.forEach((item)=>{
        if (this.actionType == '全部') {
          array.push(item);
        } else if (this.actionType == '买入' && item.side=='buy') {
          array.push(item);
        } else if (this.actionType == '卖出' && item.side=='sell') {
          array.push(item);
        } 
        
        else if (this.actionType == '开多' && item.offset==1 && item.side=='buy') {
          array.push(item);
        } else if (this.actionType == '开空' && item.offset==1 && item.side=='sell') {
          array.push(item);
        } else if (this.actionType == '平多' && item.offset==0 && item.side=='sell') {
          array.push(item);
        } else if (this.actionType == '平空' && item.offset==0 && item.side=='buy') {
          array.push(item);
        }
      });
      array.length && array.push({});
      this.datas = array;
    },

    
    //删除定时器
    delectTime() {
      if(this.timeHandler){
        clearTimeout(this.timeHandler);
      }
    },
    
    //10秒刷新一次列表
    addTime(){
      if(this.timeHandler){
        clearTimeout(this.timeHandler);
      }

      this.timeHandler = setTimeout(() => {
        this.refresh(false);
      }, 10000);
    },

    /********************************************** https*/
    //https查询下单列表
    httpsQueryOrderList(load, rsa){

      var param = {'type':this.typex[this.type],
                'apiData':rsa,
                'exchangeName':this.api.exchangeName,
                'counterCoin':this.pair.counterCoin,
                'baseCoin':this.pair.baseCoin};
      jhttps.post("manual/queryNoDealOrderList",param,true,(data)=>{

          if (data.status == 11505) { //服务器公钥过期
            jtrading.delectApiRsaStr(this.isContract);
            jtrading.gtApiRsaStr(this.api, this.isContract, load, (newrsa)=>{
              this.httpsQueryOrderList(load, newrsa);
            });
            return;
          }

          load && jmodal.hideLoad();
          if(data.status == 200){

            var datas = data.data.noDealOrderList;
            this.change(datas); 

            datas.forEach((item)=>{
              item.createTimeStr = jtime.getTime(item.createTime, 'M/d H:m');
            });
            this.array = datas;
            this.searchData(datas);
          } else {
            load && jmodal.toast(data.msg);
          }
      });
    },

    //https查询完成订单列表
    httpsQueryOrderListOk(load, rsa){

      var param = {'type':this.typex[this.type],
                    'apiData':rsa,
                    'exchangeName':this.api.exchangeName,
                    'counterCoin':this.pair.counterCoin,
                    'baseCoin':this.pair.baseCoin};
      jhttps.post("manual/queryFinishOrderList",param,true,(data)=>{

          if (data.status == 11505) { //服务器公钥过期
            jtrading.delectApiRsaStr(this.isContract);
            jtrading.gtApiRsaStr(this.api, this.isContract, load, (newrsa)=>{
              this.httpsQueryOrderListOk(load, newrsa);
            });
            return;
          }

          load && jmodal.hideLoad();
          if(data.status == 200){
            var datas = data.data.finishOrderList;
            this.change(datas); 

            datas.forEach((item)=>{
              item.createTimeStr = jtime.getTime(item.createTime, 'M/d H:m');
            });
            this.array = datas;
            this.searchData(datas);
          } else {
            load && jmodal.toast(data.msg);
          }

          this.menu && this.addTime();
      });
    },

    //https撤单
    httpsCancelOrder(item, index, rsa){

      var param = {'orderId':item.orderId,
                    'type':item.type,
                    'apiData':rsa,
                    'exchangeName':this.api.exchangeName,
                    'counterCoin':this.pair.counterCoin,
                    'baseCoin':this.pair.baseCoin,};
      jhttps.postX("manual/cancelOrder",param,true,(data)=>{

        if (data.status == 11505) { //服务器公钥过期
          jtrading.delectApiRsaStr(this.isContract);
          jtrading.gtApiRsaStr(this.api, this.isContract, true, (newrsa)=>{
            this.httpsCancelOrder(item, index, newrsa);
          });
          return;
        }

        jmodal.hideLoad();
        if(data.status == 200){
          jmodal.toast(T('撤单成功'));

          var array = [];
          this.array.forEach((item)=>{
            if (item.orderId != orderId) {
              array.push(item);
            }
          })
          this.array = array;
          this.datas.splice(index, 1);
          if (this.datas.length==1) {
            this.datas = [];
          }
          WeexTrading.apiChange(this.api.apiId, '', '0');
        }else{
          jmodal.toast(data.msg);
        }
      });
    },

    /**********************************************点击触发*/
    //当前委托
    allClick(){
      this.menu = true;
      this.length = -1;
      this.array = [];
      this.datas = [];
      this.refresh();
    },

    //历史委托
    historyClick(){
      this.menu = false;
      this.length = -1;
      this.array = [];
      this.datas = [];
      this.refresh();
    },
    
    //提示
    tipeClick(){
      jmodal.alert(T('此列表支持查询近48小时的委托记录，更多记录请前往交易所查询。'));
    },

     //交易对
    parClick(){

      var param = {'exchangeId':this.api.exchangeId,
                  'exchangeName':this.api.exchangeName,
                  'counterCoin':this.pair.counterCoin,
                  'baseCoin':this.pair.baseCoin};

      var url = this.isContract ? 'up/SelectPairNorm' : 'upContract/CSelectPair';
      var key = this.isContract ? 'SelectPairNorm' : 'CSelectPair';
      jnavigator.open('', url, param);
      jbroadcast.subscribeOnce(key, (pair)=>{
        this.pair = pair;
        this.length = -1;
        this.array = [];
        this.datas = [];
        this.refresh();
      });
    },

    //委托类型
    functionClick(){
      
      var types = [];
      var typed = {};
      for (let index = 0; index < this.types.length; index++) {
        var value = this.types[index];
        typed[T(value)] = index;
        types.push(T(value));
      }
      jmodal.actionSheet(types, T(this.type), (value)=>{
        if (T(this.type) == value) return;

        var index = typed[value];
        this.type = this.types[index];
        this.length = -1;
        this.array = [];
        this.datas = [];
        this.refresh();
      });
    },

    //操作类型
    actionClick(){

      var actionTypes = [];
      var actionTyped = [];
      for (let index = 0; index < this.actionTypes.length; index++) {
        var value = this.actionTypes[index];
        actionTyped[T(value)] = index;
        actionTypes.push(T(value));
      }
      jmodal.actionSheet(actionTypes, T(this.actionType), (value)=>{
        if (T(this.actionType) == value) return;

        var index = actionTyped[value];
        this.actionType = this.actionTypes[index];
        this.searchData(this.array);
      });
    },

    //撤销
    cancelClick(item, index) {
      jmodal.showLoad();
      jtrading.gtApiRsaStr(this.api, this.isContract, true, (rsa)=>{
        this.httpsCancelOrder(item, index, rsa);
      });
    }
  }
};

</script>

<style src="@/_css/style.css" ></style>

<style scoped>
.bg{
  width: 750px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}


/************************************************************** 分类*/
.menu{
  flex-direction: row;
  background-color:#121D39;
  padding-top: 14px;
  padding-left: 40px;
  padding-right: 40px;
}
.menu-size {
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 84px;
}
.menu-line{
  width:124px;
  height:4px;
  margin-top: 10px;
}
.menu-tipe{
  width:25px;
  height:25px;
  margin-left: 8px;
}

/**************************************************************筛选*/
.screen{
  flex-direction: row;
  justify-content: space-between;
  height:64px;
  background-color:#121D39;
  margin-top: 1px;
  padding-left: 40px;
  padding-right: 40px;
}
.screen-size {
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.img-arrow-down {
  width:16px;
  height:12px;
  margin-left: 10px;
}

/**************************************************************列表*/
.scroller {
  flex: 1;
  flex-direction: column;
}
.wrapper{
  flex-direction: column;
  width:750px;
}
.order-genduo{
  justify-content: center;
  align-items: center;
  height: 100px;
}
.order-kong {
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.img-kong {
  width: 378px;
  height: 305px;
  margin-bottom: 40px;
}
</style>